<template>
	<view class="content">
		
		<view class="topbg">
			<view class="text1">自营专区</view>
		</view>
		
		<!-- 分类 -->
		<!-- <view class="cate-section">
			<view v-for="(item, index) in cateList" :key="index" class="cate-item" @click="getActive(item.id)">
				<image :src="item.thumb||'/static/images/errorImage.jpg'"></image>
				<text>{{ item.name }}</text>
			</view>
		</view> -->

		<view class="goods-info">
			<!-- 空白页 -->
			<!-- <empty v-if="loaded === true && goodsList.length === 0"></empty> -->
			
			<!-- 订单列表 -->
			<view class="goods-list">
				<view v-for="(item, index) in goodsList" :key="index" class="goods-item" @click="navToDetailPage(item)">
					<view class="image-wrapper"><image :src="item.thumb" mode="aspectFill"></image></view>
					<text class="title clamp">{{ item.name }}</text>
					<view class="price-box">
						<text class="price">￥:{{ item.price }}</text>
						<text>库存 {{ item.stocknum }}</text>
					</view>
				</view>
			</view>

			<uni-load-more :status="loadingType"></uni-load-more>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			headerPosition: 'fixed',
			headerTop: '0px',
			loaded: false, //加载完成
			loadingType: 'more', //加载更多状态
			
			token: '',
			
			catid: 0,
			cateList: [],
			
			goodsList: [],
			p: 1,
			size: 20,
			count: 0
		};
	},
	onLoad(options) {
		this.token = this.$api.get('token');
		
		//加载分类
		this.categorylist();
		
		//接收传值,id
		let catid = options.catid;
		if(catid && catid != undefined){
			this.catid = catid;
		}
		
	},
	onShow() {
		this.loadData('refresh');
	},
	onPageScroll(e) {
		//兼容iOS端下拉时顶部漂移
		if (e.scrollTop >= 0) {
			this.headerPosition = 'fixed';
		} else {
			this.headerPosition = 'absolute';
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	//上拉加载更多数据
	onReachBottom() {
		this.loadData();
	},
	methods: {
		// 点击头部标题
		getActive(id) {
			this.catid = id;
			
			this.goodsList = [];
			this.p = 1;
			this.size = 20;
			this.count = 0;
			
			this.loaded = false;
			this.loadingType = 'more';
			
			this.loadData();
		},
		async categorylist(){
			const param = {};
			param.typeid = 0;
			await this.$http.request('Goods', 'categorylist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.cateList =  res.data.data;
					}
				}
			});
		},
		//加载商品 ，带下拉刷新和上滑加载
		async loadData(type = 'add') {
			//防止重复加载
			if (this.loadingType === 'loading') {
				return;
			}

			//没有更多直接返回
			if (type === 'add') {
				if (this.loadingType === 'nomore') {
					return;
				}
				this.loadingType = 'loading';
			} else {
				this.loadingType = 'more';
			}

			if (type === 'refresh') {
				this.goodsList = [];
				this.p = 1;
				this.count = 0;
				this.loaded = false;
				//下拉刷新停止
				uni.stopPullDownRefresh();
			}

			const param = {};
			param.token = this.token;
			param.typeid = 0;
			param.catid = this.catid;
			param.p = this.p;
			param.size = this.size;

			await this.$http.request('Goods', 'goodslist', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						if (res.data.data.count > 0) {
							this.goodsList = this.goodsList.concat(res.data.data.list);
						}

						this.p = this.p + 1;
						this.count = res.data.data.count;
						this.loaded = true;

						//判断是否还有下一页，有是more  没有是nomore
						this.loadingType = this.count <= (this.p - 1) * this.size ? 'nomore' : 'more';
					}
				}
			});
		},
		//产品详情
		navToDetailPage(item) {
			let id = item.id;
			if (id && id != undefined) {
				uni.navigateTo({
					url: `/pages/menu0/detail?id=${id}`
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>

	page,.content {
		background: $page-color-base;
	}

	.topbg{
		width: 100%;
		height: 360upx;
		overflow: hidden;
		background: url('/static/images/goods0.png') no-repeat;
		background-size: contain;
		position: relative;
		
		.text1{
			position: absolute;
			left: 0upx;
			bottom: 0upx;
			width: 100%;
			height: 80upx;
			overflow: hidden;
			background: url('/static/images/top_bg1.png') no-repeat;
			background-size: cover;
			font-size: 40upx;
			line-height: 80upx;
			padding-left: 20upx;
			color: #4d1dbb;
		}
		
	}

	/* 分类 */
	.cate-section {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 30upx 22upx;
		background: #fff;
		
		.cate-item {
			display: flex;
			flex-direction: column;
			width: 20%;
			margin: 20upx 0upx 20upx 0upx;
			align-items: center;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
		}
		
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: 0.7;
			box-shadow: 4upx 4upx 20upx rgba(77, 29, 187, 0.4);
		}
	}
	
	
	/* 商品列表 */
	.goods-info{
		padding-top: 20upx;
	}
	.goods-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
		.goods-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;
			&:nth-child(2n + 1) {
				margin-right: 4%;
			}
		}
		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
			line-height: 80upx;
		}
		.price-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 10upx;
			font-size: 24upx;
			color: $font-color-light;
		}
		.price {
			font-size: $font-lg;
			color: $uni-color-primary;
			line-height: 1;
		}
	}
</style>